import { Divider, Dropdown } from 'antd';
import './style.less'
import styled from 'styled-components';
import React, { useEffect } from 'react';
import { UpOutlined } from '@ant-design/icons';
import { JoinFieldTable } from './JoinFieldTable';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { usePreviousNodes } from '@/hooks/usePreviousNodes';
import { useNodesData, useReactFlow } from '@xyflow/react';
import { JoinModes } from '@/constant';

const ModeTitle = styled.div`
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
`

const ModeDescription = styled.div`
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
line-height: 30px;
font-size: 13px;
`

const modeList = JoinModes.map((mode) => ({
  key: mode.key,
  label: (
    <>
      <ModeTitle>
        <img src={mode.icon} alt={mode.title} />
        {mode.title}
      </ModeTitle>
      <ModeDescription>{mode.description}</ModeDescription>
    </>
  ),
}))

const JoinModesMap = JoinModes.reduce((acc, cur) => {
  acc[cur.key] = cur;
  return acc
}, {})

const JoinMode = () => {
  const { updateNodeData } = useReactFlow()
  const currentNode = useCurrentNode()
  const nodeData = useNodesData(currentNode?.id)
  const preNodes = usePreviousNodes(currentNode?.id)
  const menu = {
    items: modeList,
    onClick: ({ key }) => {
      setSelected(key)
    }
  }
  const selected = nodeData?.data?.joinType
  const selectItem = JoinModesMap[selected]

  const leftNode = preNodes?.[0]
  const rightNode = preNodes?.[1]

  const setSelected = (joinType) => {
    updateNodeData(currentNode?.id, { joinType })
  }

  useEffect(() => {
    if (!selected) {
      setSelected(JoinModes?.[0]?.key)
    }
  }, [selected])

  useEffect(() => {
    if (leftNode && rightNode) {
      updateNodeData(currentNode?.id, {sources: [leftNode?.id, rightNode?.id]})
    }
  }, [leftNode, rightNode])


  return <div className='join-mode-container'>
    <div className='join-mode-title'>请选择关联模式</div>
    <div className='join-mode'>
      <div className={['join-mode-left', 'ellipsis', preNodes?.[0]?.data?.label || 'error'].join(' ')}>
        {preNodes?.[0]?.data?.label || '缺少上游节点，请拖拽连线'}
      </div>
      <div className='join-mode-mid'>
        <hr style={{ position: 'absolute', width: '100%', borderColor: '#8b868621' }} />
        <Dropdown menu={menu} trigger='click' placement='top'>
          <div style={{ display: 'flex', flexDirection: 'column', height: 30, alignItems: 'center' }}>
            <img src={selectItem?.icon} style={{ backgroundColor: '#fff', zIndex: 2 }} />
            <span style={{ fontSize: 12 }}>
              {
                selectItem?.title
              }
              <UpOutlined />
            </span>
          </div>
        </Dropdown>
      </div>
      <div className={['join-mode-right', 'ellipsis', preNodes?.[1]?.data?.label || 'error'].join(' ')}>
        {preNodes?.[1]?.data?.label || '缺少上游节点，请拖拽连线'}
      </div>
    </div>
  </div>

}

export const Join = () => {
  return (
    <div className='join-container'>
      <div className='join-header'>
        <JoinMode />
      </div>
      <Divider style={{ margin: '10px 0' }} />
      <div className='join-body'>
        <JoinFieldTable />
      </div>
    </div>
  );
};